<template>
  <div class="shop-content template">
    <div class="height-100"></div>
    <div class="diy-bg-main">
      <div class="phone-bg-box width-375">
        <div class="top-bg">
          <i class="el-icon-arrow-left"></i>
          <span>首页</span>
        </div>
        <div class="layout" v-if="AdImgList.popupsStatus === 'on'"></div>
        <div class="pad-15" v-if="AdImgList.popupsStatus === 'on'">
          <!-- 图片 -->
          <div class="ad-img-box">
            <div v-if="AdImgList.imgList.length === 1">
              <div v-for="(item, index) in AdImgList.imgList" :key="index">
                <img :src="item.imgUrl" alt="" class="width-per-100">
              </div>
            </div>
            <el-carousel indicator-position="outside" v-if="AdImgList.imgList.length>1">
              <el-carousel-item v-for="(item, index) in AdImgList.imgList" :key="index">
                <img :src="item.imgUrl" alt="" class="width-per-100">
              </el-carousel-item>
            </el-carousel>
          </div>
          <i class="el-icon-error font-24"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: [
        'https://img0.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto&gp=0.jpg',
        'https://img1.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto&gp=0.jpg'
      ],
      AdImgList: {
        popupsStatus: '',
        showSetting: '',
        intervalTime: 0,
        imgList: []
      }
    }
  },
  watch: {
    customPage: {
      deep: true,
      immediate: false,
      handler() {
        this.initEls()
      }
    }
  },
  props: {
    customPage: {
      type: Object,
      default: () => {}
    }
  },
  created() {
  },
  mounted() {
    console.log()
  },
  methods: {
    initEls() {
      this.AdImgList = this.customPage.AdImgList
    }
  }
}
</script>

<style lang="less" scoped>
@sideWhite: 66px;
@sideSubWhite: 298px;
@sideRightWhite: 390px;
@height: 60px;
.shop-content{
  padding-left: @sideWhite + @sideSubWhite;
  padding-right: @sideRightWhite;
  box-sizing: border-box;
  .diy-bg-main{
    position: relative;
    min-height: 670px;
    padding-top: 1px;
    padding-left: calc(50% - 188px);
    box-sizing: border-box;
    .phone-bg-box {
      border: 1px solid #ddd;
      min-height: 667px;
      background: #fff;
      position: relative;
      .top-bg {
        background:url('') 0 0 no-repeat;
        background-size: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        position: relative;
        &>i {
          position: absolute;
          left: 4px;
          z-index: 10;
          font-size: 20px;
          top: 29px;
        }
        &>span {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 700;
          padding-top: 26px;
        }
      }
      .layout {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        // z-index: 1;
      }
      .ad-img-box {
        width: 70%;
        height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
      }
      .el-icon-error {
        position: absolute;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        color: #fff;
      }
    }
  }
}
</style>
